<div class="wrapper-bz-page">
    <form id="form_add_page_custom" enctype="multipart/form-data" method="post" action="#" class="form form-add-page-custom">
        <div class="wrapper-form flex-container-row">
            <div class="flex-item flex1">
                <div class="column-title">基本信息</div>
                <dl class="row">
                    <dt class="tit-m">
                        <label>唯一标识码</label>
                    </dt>
                    <dd class="opt">
                        <input type="text" name="page_code" class="input-txt" maxlength="50" />
                    </dd>
                </dl>
                <dl class="row">
                    <dt class="tit-m">
                        <label>页面名称</label>
                    </dt>
                    <dd class="opt">
                        <input type="text" name="page_name" class="input-txt" maxlength="50" />
                    </dd>
                </dl>
                <dl class="row">
                    <dt class="tit-m">
                        <label>数据表</label>
                    </dt>
                    <dd class="opt">
                        <input type="text" name="table_id" class="input-txt" maxlength="50" id="input_page_name_in_add_page_custom"/>
                    </dd>
                </dl>
                <dl class="row">
                    <dt class="tit-m">
                        <label>状态</label>
                    </dt>
                    <dd class="opt">
                        <label><input type="radio" value="1" checked="checked" name="status">启用</label>
                        <label><input type="radio" value="0" name="status">禁用</label>
                        <span class="err"></span>
                    </dd>
                </dl>

            </div>

            <div class="flex-item flex2">
                <div class="column-title">页面请求</div>
                <div class="row flex-container-row">
                    <div class="flex-item flex1 flex-container-row">
                        <div class="group-title">
                            页面
                        </div>
                        <div class="flex3 group-content">
                            <div class="line"><label>新增</label><input type="text" name="api_list[page][add]" class="input-txt" maxlength="255" /></div>
                            <div class="line"><label>编辑</label><input type="text" name="api_list[page][edit]" class="input-txt" maxlength="255" /></div>
                        </div>
                    </div>
                    <div class="flex-item flex1 flex-container-row">
                        <div class="group-title">
                            数据
                        </div>
                        <div class="flex3 group-content">
                            <div class="line"><label>新增</label><input type="text" name="api_list[api][add]" class="input-txt" maxlength="255" /></div>
                            <div class="line"><label>编辑</label><input type="text" name="api_list[api][edit]" class="input-txt" maxlength="255" /></div>
                            <div class="line"><label>删除</label><input type="text" name="api_list[api][delete]" class="input-txt" maxlength="255" /></div>
                            <div class="line"><label>查询</label><input type="text" name="api_list[api][get]" class="input-txt" maxlength="255" /></div>
                            <div class="line"><label>批量删除</label><input type="text" name="api_list[api][multi_delete]" class="input-txt" maxlength="255" /></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="zone-page-column-setting">
            <div class="column-title">页面纵列配置</div>
            <div class="box-sizing-content">
                <table id="table_field_in_add_page_custom"></table>
            </div>
        </div>

        <div class="zone-footer"><button id="btn_submit_form_add_page_custom"  class="hide" type="button">提交</button></div>
    </form>
</div>
<script>
    $(function(){
        var formId = "#form_add_page_custom";
        var dataTableOption = getTableOption();
        var tableOptionConfig = {
            data: dataTableOption,
            textField: "table_name",
            valueField: "id",
            onSelect:function(item){
                $("#btn_submit_form_add_page_custom").removeClass("hide");
                autofillRequestPath(item.id);
                renderFieldList(item.id);
            }
        };
        $("#input_page_name_in_add_page_custom").combobox(tableOptionConfig);

        $("#btn_submit_form_add_page_custom").click(function(){
            var formData = $(formId).serializeObject();
            console.log("form data:", formData);
            $.ajax({
                url: '/api/PageCustom/addPageCustom',
                async: false,
                type: 'post',
                data: formData,
                success: function (resp) {
                    if (1 == resp.code) {
                        optionData = resp.data;
                    }else{
                        layer.msg(resp.message);
                    }
                }
            });
        });
    });

    function getTableOption() {
        var optionData;
        $.ajax({
            url: '/api/Table/getTableOption',
            async: false,
            type: 'post',
            data: {},
            success: function (resp) {
                if (1 == resp.code) {
                    optionData = resp.data;
                }
            }
        });
        return optionData;
    }

    function getTableFieldOption(tableId) {
        var optionData;
        $.ajax({
            url: '/api/Table/getTableFieldOption',
            async: false,
            type: 'post',
            data: {table_id: tableId},
            success: function (resp) {
                if (1 == resp.code) {
                    optionData = resp.data;
                }
            }
        });
        return optionData;
    }

    function renderFieldList(tableId)
    {
        var fieldList = getTableFieldOption(tableId);
        console.log("field list:", fieldList);
        var htmlTableHead = '<thead><th>列名</th><th>标题</th><th>列宽</th><th>位置</th><th>是否隐藏</th><th>新增是否包含</th><th>编辑是否包含</th><th>状态</th></thead>';
        var htmlTableBody = '<tbody>';
        $.each(fieldList, function(index, fieldItem){
            htmlTableBody += '<tr>';
            htmlTableBody += '<td><input type="hidden" class="input-column-code" name="field_list[' + index + '][column_name]" value="' + fieldItem.field_name + '" class="input-txt" />' + fieldItem.field_name +'</td>';
            htmlTableBody += '<td><input type="text" class="input-column-title" name="field_list[' + index + '][column_title]" value="' + fieldItem.field_title + '" class="input-txt" /></td>';
            htmlTableBody += '<td><input type="text" class="input-column-width" name="field_list[' + index + '][column_width]"  class="input-txt" /><em>px</em></td>';
            htmlTableBody += '<td><select name="field_list[' + index + '][fix_position]"  ><option value="left">居左</option><option value="center">居中</option><option value="right">居右</option></select></td>';
            htmlTableBody += '<td><select name="field_list[' + index + '][is_hide]"  ><option value="1">是</option><option value="0">否</option></select></td>';
            htmlTableBody += '<td><select name="field_list[' + index + '][is_in_add]"  ><option value="1">是</option><option value="0">否</option></select></td>';
            htmlTableBody += '<td><select name="field_list[' + index + '][is_in_edit]"  ><option value="1">是</option><option value="0">否</option></select></td>';
            htmlTableBody += '<td><select name="field_list[' + index + '][status]"  ><option value="1">是</option><option value="0">否</option></select></td>';
            htmlTableBody += '</tr>';
        });
        htmlTableBody += '</tbody>';
        var finalHtml = htmlTableHead + htmlTableBody;
        $("#table_field_in_add_page_custom").html(finalHtml);
    }

    function autofillRequestPath(tableId)
    {
        $.ajax({
            url: '/api/PageApi/getPageApiByTableId',
            async: false,
            type: 'post',
            data: {table_id: tableId},
            success: function (resp) {
                if (1 == resp.code && resp.data.hasOwnProperty("path_api_add") ) {
                    $("input[name='api_list[page][add]']").val(resp.data.path_page_add);
                    $("input[name='api_list[page][edit]']").val(resp.data.path_page_edit);
                    $("input[name='api_list[api][add]']").val(resp.data.path_api_add);
                    $("input[name='api_list[api][edit]']").val(resp.data.path_api_edit);
                    $("input[name='api_list[api][delete]']").val(resp.data.path_api_delete);
                    $("input[name='api_list[api][get]']").val(resp.data.path_api_get);
                }
            }
        });
    }
</script>